// 柱状图1模块
(function () {
  let chart = document.querySelector('.bar .chart')
  // 1-实例化对象
  let myChart = echarts.init(chart)

  // 2-指定配置项和数据
  let option = {
    color: ['#2f89cf'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '0%',
      right: '0%',
      top: '10px',
      bottom: '4%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
        axisTick: {
          alignWithLabel: true
        },
        // TODO: 刻度标签的颜色和字体大小
        axisLabel: {
          color: 'rgba(255,255,255,.6)',
          fontSize: "12"
        },
        // TODO: 刻度X轴线是否显示
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // y 轴文字标签样式
        axisLabel: {
          color: 'rgba(255,255,255,.6)',
          fontSize: "12"
        },
        // y轴线条样式
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)',
            width: 2
          }
        },
        // y轴的分割线的颜色
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)  '
          }
        }
      }

    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        // TODO: 修改柱子的宽度
        barWidth: '35%',
        // series 更换数据
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  }

  // TODO: 3-将配置项给实例对象
  myChart.setOption(option)

  // TODO: 4-让图表跟随屏幕自动适应宽度
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

// 柱状图2
(function () {
  let chart = document.querySelector('.bar2 .chart')
  // 1-实例化对象
  let myChart = echarts.init(chart)

  // 声明颜色数组
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

  // 2-指定配置项和数据
  let option = {
    grid: {
      top: '10%',
      left: '22%',
      bottom: '10%',
      // containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        type: 'category',
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // 反转过来
        inverse: true,
        yAxisIndex: 0,
        // 不显示y轴线条
        axisLine: {
          show: false
        },
        // 不显示刻度条
        axisTick: {
          show: false
        },
        axisLabel: {
          // Y轴上的文字颜色
          color: '#fff'
        }
      },
      // y轴的第二组显示数据
      {
        show: true,
        data: [702, 350, 610, 793, 664],
        // 反转过来
        inverse: true,
        // 不显示轴线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff"
          }
        }
      }
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        yAxisIndex: 1,
        // 柱子之间的距离
        barCategoryGap: 50,
        // 柱子的宽度
        barWidth: 10,
        itemStyle: {
          barBorderRadius: 20,
          // 修改每个柱子的颜色
          color(params) {
            // params 是柱子对象 dataIndex是当前柱子的索引号
            // TODO: 不会越过下标了
            let num = myColor.length
            return myColor[params.dataIndex % num]
          }
        },
        data: [70, 34, 60, 78, 69],
        // 显示柱子内的文字
        label: {
          show: true,
          // 图形内显示
          position: "inside",
          // 文字的显示格式
          // TODO: {c} 会自动解析为 data 里面的数据
          formatter: '{c}%'
        }
      },
      {
        name: '框',
        type: 'bar',
        // 柱子之间的距离
        barCategoryGap: 50,
        // 柱子的宽度
        barWidth: 15,
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        },
        data: [100, 100, 100, 100, 100],
      }
    ]
  }

  // TODO: 3-将配置项给实例对象
  myChart.setOption(option)

  // TODO: 4-让图表跟随屏幕自动适应宽度
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

// 折线图1
(function () {
  // 点击切换的数据
  var yearData = [
    {
      year: '2020',  // 年份
      data: [  // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
      year: '2021',  // 年份
      data: [  // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];

  let chart = document.querySelector('.line .chart')
  // 1-实例化对象
  let myChart = echarts.init(chart)

  // 2-指定配置项和数据
  let option = {
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // data: ['新增粉丝', '新增游客'], 如果series有值, 就不用设置data
      // 修改图例组件的文字颜色
      textStyle: {
        color: '#4c9bfd'
      },
      right: '10%' // 距离右边10%
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true, // 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 去除轴内间距
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        // X轴上的文字颜色
        color: '#fff'
      },
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: '#4c9bfd' // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // Y轴上的文字颜色
        color: '#fff'
      },
      axisTick: {
        show: false  // 去除刻度
      },
      axisLabel: {
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a' // 分割线颜色
        }
      }
    },
    series: [
      {
        name: '新增粉丝',
        type: 'line',
        data: yearData[0].data[0],
        // 折线修饰为圆滑
        smooth: true,
      },
      {
        name: '新增游客',
        type: 'line',
        data: yearData[0].data[1],
        // 折线修饰为圆滑
        smooth: true,
      },
    ]
  };

  // TODO: 3-将配置项给实例对象
  myChart.setOption(option)

  // TODO: 4-让图表跟随屏幕自动适应宽度
  window.addEventListener('resize', function () {
    myChart.resize()
  })

  // TODO:点击切换效果 -- 自动切换效果
  let index = 0
  let timer = null
  $('.line h2').on('click', 'a', function () {
    // 当前选中的样式
    $(this).addClass('active').siblings().removeClass('active')

    // console.log($(this).index());
    // console.log(yearData[$(this).index()]);
    // test
    // 找到 点击的索引值
    index = $(this).index();

    // TODO: 重点代码
    let obj = yearData[index]
    option.series[0].data = obj.data[0]
    option.series[1].data = obj.data[1]

    // // 进行重新渲染
    myChart.setOption(option)
  })

  // 初始 定时器运行
  getTimer();

  // 单独封装设置定时器
  function getTimer() {
    // 先清除
    clearInterval(timer);
    timer = setInterval(function () {
      // 限制 index 的范围 0-1
      index = (index + 1) % 2;
      // 给对应的 tab 栏设置点击事件
      $(".line h2 a").eq(index).click();
    }, 2000);
  }

  // 鼠标经过sales，关闭定时器，离开开启定时器
  $(".panel.line").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      getTimer();
    }
  );
})();

// 折线图2
(function () {
  let chart = document.querySelector('.line2 .chart')
  // 1-实例化对象
  let myChart = echarts.init(chart)

  // 2-配置option
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: 12
      },
      data: ['播放量', '转发量']
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        // x轴更换数据
        data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
        axisLabel: {
          // Y轴上的文字颜色
          color: '#fff'
        },
        // 不显示刻度条
        axisTick: {
          show: false
        },
        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        },
      },

    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          // Y轴上的文字颜色
          color: '#fff'
        },
        // 不显示刻度条
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // TODO: 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: '播放量',
        type: 'line',
        //第一条 线是圆滑
        smooth: true,
        lineStyle: {
          color: '#0184d5',
          width: '3'
        },
        // 填充颜色设置
        areaStyle: {
          // 渐变色，只需要复制即可
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点
        symbol: 'circle',
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#0184d5",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12
        },
        // 鼠标经过显示拐点
        showSymbol: false,
        // series  第一个对象data数据
        data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
      },
      {
        name: '转发量',
        type: 'line',
        //第一条 线是圆滑
        smooth: true,
        lineStyle: {
          color: '#00d887',
          width: '3'
        },
        // 填充颜色设置
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#00d887",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        // series  第二个对象data数据
        data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],
      }
    ]
  };

  // TODO: 3-将配置项给实例对象
  myChart.setOption(option)

  // TODO: 4-让图表跟随屏幕自动适应宽度
  window.addEventListener('resize', function () {
    myChart.resize()
  })

})();

// 饼图1
(function () {
  let chart = document.querySelector('.pie .chart')
  // 1-实例化对象
  let myChart = echarts.init(chart)

  // 2-配置option
  let option = {
    color: [
      "#065aab",
      "#066eab",
      "#0682ab",
      "#0696ab",
      "#06a0ab",
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      // 距离底部为0%
      bottom: "0%",
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      // legend 中的data  可省略
      data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
      // 修改图例组件的文字为 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
        radius: ["40%", "60%"],
        // 图形的显示方位
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        // 图形上的文字
        label: {
          // 不显示标签文字
          show: false
        },
        // 不显示连接线
        labelLine: {
          show: false
        },
        //  series 中的数据
        data: [
          { value: 1, name: "0岁以下" },
          { value: 4, name: "20-29岁" },
          { value: 2, name: "30-39岁" },
          { value: 2, name: "40-49岁" },
          { value: 1, name: "50岁以上" }
        ],
      }
    ]
  };


  // TODO: 3-将配置项给实例对象
  myChart.setOption(option)

  // TODO: 4-让图表跟随屏幕自动适应宽度
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

// 饼形图2
(function () {
  let chart = document.querySelector('.pie2 .chart')
  // 1-实例化对象
  let myChart = echarts.init(chart)

  // 2-配置option
  let option = {
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      bottom: '0%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: '地区分布',
        type: 'pie',
        radius: ['10%', '70%'],
        center: ['50%', '50%'],
        roseType: 'raduis',
        // 图形文字
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8,
        },
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }
        ]
      }
    ]
  };

  // TODO: 3-将配置项给实例对象
  myChart.setOption(option)

  // TODO: 4-让图表跟随屏幕自动适应宽度
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})();

// 模拟飞行路线模块地图模块, 单独封装文件
